<template>
  <div class="BookInfo-bottm-nav">
    <div>
      <span v-if="!hasLike" @click="addBookrack"
        ><i class="iconfont icon-hao"></i>追啊</span
      >
      <span v-else @click="deleBookrack"
        ><i class="iconfont icon-weibiaoti29"></i>不追了</span
      >
    </div>
    <div class="start" @click="startRead">开始阅读</div>
    <div>
      <span><i class="iconfont icon-xiazai"></i>下载</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Dialog } from "vant";
export default {
  props: ["book"],
  data() {
    return {
      chapters: null,
    };
  },
  watch: {
    book() {
      // 章节信息
      window
        .axios(
          `http://api.kele8.cn/agent/http://api.zhuishushenqi.com/atoc?view=summary&book=${this.book._id}`
        )
        .then((id) => {
          window
            .axios(`http://api.kele8.cn/agent/http://api.zhuishushenqi.com/atoc/${id.data[0]._id}?view=chapters`)
            .then((e) => {
              this.chapters = e.data.chapters;
            });
        });
    },
  },
  computed: {
    ...mapState(["user"]),
    hasLike() {
      if(!this.user)return;
      let like = this.user.bookshelf.some((item) => {
        return item._id == this.book._id;
      });
      return like;
    },
  },

  methods: {
    ...mapMutations(["addUser"]),
    //添加进书架
    addBookrack() {
      //把当前书籍提交到vuex
      let currbook = this.user;
      currbook.bookshelf.push(this.book);
      this.addUser(currbook);
      //更新本地存储对应账号的书架
      let users = JSON.parse(localStorage.getItem("user"));
      users = users.map((item) => {
        if (this.user.name == item.name) {
          return this.user;
        } else {
          return item;
        }
      });
      localStorage.setItem("user", JSON.stringify(users));
    },
    //从书架删除
    deleBookrack() {
      //把当前书籍提交到vuex
      let currbook = this.user;
      //过滤删除的书籍
      currbook.bookshelf = currbook.bookshelf.filter(
        (item) => item._id != this.book._id
      );
      this.addUser(currbook);
      //更新本地存储对应账号的书架
      let users = JSON.parse(localStorage.getItem("user"));
      users = users.map((item) => {
        if (this.user.name == item.name) {
          return this.user;
        } else {
          return item;
        }
      });
      localStorage.setItem("user", JSON.stringify(users));
    },
    //开始阅读
    startRead() {
      let currChapter = this.user.chapters.find(
        (item) => item.bookName == this.book.title
      );
      var message = null;
      if (currChapter) {
        message = `您当前看到第${currChapter.currIndex + 1}章,是否继续`;
         Dialog.confirm({
        title: "亲",
        message: message,
      })
        .then(() => {
          this.$router.push({
            name: "CatalogCon",
            params: {
              id: currChapter.id,
              link: currChapter.currChapter,
              index: currChapter.currIndex,
              book: this.book,
              chapters: this.chapters,
            },
          });
        })
        .catch(() => {
          // on cancel
        });
      } else {
        message = "您还未看过这本小说，是否开始观看?";
         Dialog.confirm({
        title: "亲",
        message: message,
      })
        .then(() => {
          this.$router.push({
            name: "CatalogCon",
            params: {
              id: this.chapters[0].id,
              link: this.chapters[0],
              index: this.chapters[0].order,
              book: this.book,
              chapters: this.chapters,
            },
          });
        })
        .catch(() => {
          // on cancel
        });
      }
      // console.log(this.user.chapters.find((item) => item.bookName == this.book.title));

      // Dialog.confirm({
      //   title: "亲",
      //   message: message,
      // })
      //   .then(() => {
      //     this.$router.push({
      //       name: "CatalogCon",
      //       params: {
      //         id: currChapter.id,
      //         link: currChapter.currChapter,
      //         index: currChapter.currIndex,
      //         book: this.book,
      //         chapters: this.chapters,
      //       },
      //     });
      //   })
      //   .catch(() => {
      //     // on cancel
      //   });
    },
  },
};
</script> 

<style lang="less">
.BookInfo-bottm-nav {
  border-top: @borderBtm;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: white;
  height: 50px;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  > div {
    flex: 1;
    text-align: center;
    display: grid;
    place-content: center;
    color: #da3d3f;
    font-size: 15px;
    span {
      .iconfont {
        margin-right: 2px;
      }
    }
  }
  .start {
    background: #f34129;
    color: white;
    font-size: 16px;
    margin-top: -2px;
  }
}
</style>